<template>
  <div id="mainbox"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'

export default {
  name: '',
  data() {
    return {}
  },
  mounted() {
    // 01: 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('mainbox'))
    console.log('myChart', myChart)

    myChart.setOption({
      title: {
        // 图表的标题
        text: 'ECharts 入门示例',
        textStyle: {
          color: 'red',
          fontSize: 20
        },
        subtext: '2220班级',
        left: 'left'
      },
      legend: {
        // 图例组件
        data: ['销量', '省份人数']
      },
      tooltip: {
        // 表示提示组件
        // formatter: '{b}{a}:<br />{c}'
      },
      toolbox: {
        feature: {
          saveAsImage: {},
          restore: {},
          dataView: {},
          dataZoom: {},
          magicType: {
            type: ['line', 'bar', 'stack']
          }
        }
      },
      xAxis: {
        // x轴
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {}, //y轴
      series: [
        // 表示图表中的数据
        {
          // 第一个类数据
          name: '销量',
          type: 'bar',
          data: [500, 20, 36, 10, 10, 20]
        },
        {
          // 第二类数据
          name: '省份人数',
          type: 'bar',
          data: [10, 50, 2, 100, 90, 1]
        }
      ]
    })
  }
}
</script>
<style scoped>
#mainbox {
  width: 600px;
  height: 500px;
  border: 1px solid black;
}
</style>